<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="css/element.css" rel="stylesheet"/>
    <link href="css/styleindex.css" rel="stylesheet"/>
    <style>
    .el-rate__icon{
      margin-right: 2px;
    }.el-rate__text{
      font-size: .8rem;
    }.el-select{
      width: 4rem;
      font-size: .6rem;
    }.el-input__inner{
      height: 2rem;
      line-height: 2rem;
      font-size: .7rem;
      padding: 0;
      margin: 0;
    }
    </style>
</head>
<body style="background: #EFF0F4;">

  <div class="mui-content" style="margin-bottom:50px;">
    <div id="vm" class="x-examok" v-cloak>
      <div class="x-st-margin">
        <!--  -->
        <div class="x-st-box">
          <div class="x-st-top">
            <div class="x-st-l">
              <div class="x-st-appname">餐众邦-CIM系统</div>
              <div class="x-st-desc">{{companyth}}-连锁信息化管理</div>
            </div>
            <div class="x-st-r">
              <div class="x-st-head">
                <img :src="avatarth" alt="" v-if="avatarth!=''">
                <img src="./image/head.png" alt="" v-else>
              </div>
              <div class="x-st-name">{{usernameth}}
                <!-- ({{leveltitleth}}) -->
              </div>
            </div>
          </div>
          <div class="x-st-bott">
            <div class="x-st-store" v-if="nowtype==1">部门：{{storeth}}</div>
            <div class="x-st-store" v-else>门店：{{storeth}}</div>
            <div class="x-st-store">
              工作站：
              <el-select v-model="jobsselect" placeholder="请选择" size="mini"  @change="getselect">
                <el-option
                  v-for="item in jobsth"
                  :key="item.title"
                  :label="item.title"
                  :value="item.title">
                </el-option>
              </el-select>
            </div>
            <div class="x-st-store">{{leveltitleth}}</div>
          </div>
        </div>
        <!--  -->
        <div class="x-btn-form">
          <div class="x-st-btn" @click="api.openWin({name:'inlist',url:'./useradmin/inlist.html'})">
            <div class="x-stbtn-img x-stbtn-img1"></div>
            <div class="x-stbtn-tit">人员管理</div>
          </div>
          <div class="x-st-btn" @click="api.openWin({name:'inlisttrain',url:'./trainadmin/inlist.html'})">
            <div class="x-stbtn-img x-stbtn-img2"></div>
            <div class="x-stbtn-tit">训练管理</div>
          </div>
          <div class="x-st-btn" @click="api.openWin({name:'inlistworkforce',url:'./workforceadmin/inlist.html'})">
            <div class="x-stbtn-img x-stbtn-img3"></div>
            <div class="x-stbtn-tit">排班工时</div>
          </div>
          <div class="x-st-btn" @click="api.openWin({name:'inlistduty',url:'./dutyadmin/inlist.html'})">
            <div class="x-stbtn-img x-stbtn-img4"></div>
            <div class="x-stbtn-tit">值班管理</div>
          </div>
          <div class="x-st-btn" @click="api.openWin({name:'inweekmeeting',url:'./meetingadmin/inlist.html'})">
            <div class="x-stbtn-img x-stbtn-img5"></div>
            <div class="x-stbtn-tit">会议管理</div>
          </div>
          <div class="x-st-btn" @click="api.openWin({name:'materialinlist',url:'./material/inlist.html'})">
            <div class="x-stbtn-img x-stbtn-img6"></div>
            <div class="x-stbtn-tit">物料管理</div>
          </div>
          <div class="x-st-btn" @click="api.openWin({name:'indatalist',url:'./data/inlist.html'})">
            <div class="x-stbtn-img x-stbtn-img7"></div>
            <div class="x-stbtn-tit">数据分析</div>
          </div>
          <div class="x-st-btn" @click="api.openWin({name:'indataranklist',url:'./dataranking/inlist.html'})">
            <div class="x-stbtn-img x-stbtn-img8"></div>
            <div class="x-stbtn-tit">数据排行</div>
          </div>
          <!-- <div class="x-st-btn">
            <div class="x-stbtn-img x-stbtn-img9"></div>
            <div class="x-stbtn-tit">财务管理</div>
          </div> -->
          <div class="x-st-btn" @click="api.openWin({name:'intarget',url:'./target/inlist.html'})">
            <div class="x-stbtn-img x-stbtn-img10"></div>
            <div class="x-stbtn-tit">目标管理</div>
          </div>
          <div class="x-st-btn" @click="api.openWin({name:'teampower',url:'./teampower/inlist.html'})">
            <div class="x-stbtn-img x-stbtn-img11"></div>
            <div class="x-stbtn-tit">团队执行力</div>
          </div>
          <!-- <div class="x-st-btn">
            <div class="x-stbtn-img x-stbtn-img12"></div>
            <div class="x-stbtn-tit">岗位评价</div>
          </div> -->
          <div class="x-st-btn" @click="api.openWin({name:'innote',url:'./note/note.html'})">
            <div class="x-stbtn-img x-stbtn-img13"></div>
            <div class="x-stbtn-tit">成长日记</div>
          </div>
          <div class="x-st-btn" @click="api.openWin({name:'intotal',url:'./total/inlist.html'})">
            <div class="x-stbtn-img x-stbtn-img14"></div>
            <div class="x-stbtn-tit">总部指导</div>
          </div>
        </div>
        <!--  -->
        <div class="x-st-taskbox">
          <div class="x-sttask-top">
            <div class="x-sttask-l"><span class="x-sttask-icon"></span>我的任务</div>
            <div class="x-sttask-r">{{updateTime}}</div>
          </div>
          <div class="x-sttask-bo" v-if="mytast!=''">
            <div class="x-sttask-numall">
              <div>
                完成率<span class="x-st-green">{{finishrate}}%</span>
              </div>
              <div style="display: flex;">
                <div>执行力指数:</div> 
                <div style="">
                  <!-- {{taskscore}}分 -->
                  <!-- <el-rate v-model="taskscore" show-text :texts=this.texts disabled allow-half="true" :colors="ratecolor" text-color="#058142"></el-rate> -->
                  <el-rate v-model="valuenum" disabled allow-half="true" :colors="ratecolor" text-color="#058142"></el-rate>
                </div>
                <div class="" style="color:#058142">
                  {{valuenum*2}}分
                </div>
              </div>
            </div>
            <!--  -->
            <div class="x-sttask-list" v-for="(item,index) in mytast" :key="item.key">
              <div>{{item.title}}:{{item.num}}</div>
              <div>
                <!-- <div class="x-dis-co" v-if="item.is_finish=='1'">已完成</div> -->
                <div class="">已完成:{{item.finish}}</div>
              </div>
              <div style="display:flex" v-if="index<3">
                <div class="">执行力指数</div>
                <div style="display:inline-block">
                  <el-rate v-model="item.score/2" disabled allow-half="true" :colors="ratecolor" text-color="#058142"></el-rate>
                </div>
                <div class="" style="color:#058142">
                  {{item.score}}分
                </div>
              </div>
            </div>
          </div>
          <div class="x-nothing" v-else style="margin-bottom: 3rem;">还没有任务</div>
        </div>
      </div>

    </div>
  </div>

  <script type="text/javascript" src="./script/vue.js"></script>
  <script type="text/javascript" src="./script/element.js"></script>
  <script type="text/javascript" src="./script/api.js"></script>
  <script type="text/javascript" src="./script/base.js"></script>
	<script>
apiready = function () {
    var iostoph = api.safeArea.top;
    api.setRefreshHeaderInfo({
        loadingImg: 'widget://image/refresh.png',
        bgColor: '#ccc',
        textColor: '#fff',
        textDown: '下拉刷新...',
        textUp: '松开刷新...'
    }, function(ret, err) {
        setTimeout(function(){api.refreshHeaderLoadDone()},500)
        vm.getinfo()//
        vm.addDate()//获取时间
        vm.getmytast()
    });
    //
    api.addEventListener({
        name: 'loginsucc'
    }, function(ret, err) {
      vm.getinfo()//
      vm.addDate()//获取时间
      vm.getmytast()
    });
    var vm = new Vue({
      el:'#vm',
      data(){
        return{
          updateTime:'',
          texts:[],
          value:0,
          ratecolor:['#058142','#058142','#058142','#058142','#058142'],
          //
          companyth:'',
          usernameth:'',
          storeth:'',
          nowtype:'',
          jobsth:[],
          leveltitleth:'',
          avatarth:'',
          jobsselect:'',
          thmonth:'',
          mytast:'',
          finishrate:0,
          valuenum:0,

        }
      },
      created:function() {
        var that=this;


      },
      mounted:function(){
        var that=this;
        //当前月份
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth()+1;
        var day = date.getDate()
        if(month<10){
          month = '' + 0 + month;
        }
        if(day<10){
          day = '' + 0 + day;
        }
        var toMonth = '' + year +  month +  day;
        that.thmonth = toMonth;
        that.addDate()//获取时间
        that.getmytast()//获取任务
        that.getinfo()//
      },
      methods: {
        //获取个人信息
        getinfo:function(){
          let that=this;
          api.ajax({
            url:baseurl+'api/member/info',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken')
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              // console.log('info:'+JSON.stringify(ret));
              if(ret.status == 202||ret.status == '202'){
                api.openWin({
                    name: 'login',
                    url: './login.html',
                    slidBackEnabled:false,
                });
              }else if(ret.status == 1){
                that.companyth = ret.data.company;
                that.usernameth = ret.data.username;
                that.nowtype = ret.data.type;
                that.storeth = ret.data.shop;//门店 type=1 显示部门
                that.jobsth = ret.data.jobs;//岗位
                that.jobsselect = ret.data.ws[0];
                that.leveltitleth = ret.data.job_title;//
                that.avatarth = ret.data.avatar;
                $api.setStorage('username',ret.data.username);
                $api.setStorage('myid',ret.data.id);
                $api.setStorage('storeth',ret.data.shop);
                $api.setStorage('jobsth',ret.data.job_title);
                $api.setStorage('avatarth',ret.data.avatar);
                $api.setStorage('phone',ret.data.phone);
              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
        //
        getmytast:function(){
          let that=this;
          api.ajax({
            url:baseurl+'api/task/myList',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken'),
                date:that.thmonth
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              console.log(JSON.stringify(ret));
              if(ret.status == 1){
                that.valuenum = (ret.data.score)/2;
                that.mytast = ret.data.list;
                that.finishrate = ret.data.finish_rate;
                // var finishnum =0;
                // var execunum = 0;// 不为空de 执行力指数的个数
                // var allexec=0;//执行力指数的总数
                // for(var i=0;i<ret.data.list.length;i++){
                //   if(ret.data.list[i].finish=='1'){
                //        finishnum += 1;
                //    };
                //    if(ret.data.list[i].executive_score!='0'){
                //      execunum += 1;
                //      allexec += Number(ret.data.list[i].executive_score);
                //    };
                //  }
                //  that.finishrate = (finishnum*100/ret.data.list.length).toFixed(0)
                //  that.valuenum = allexec/execunum;
                //  that.value = allexec/execunum/2;
                //  var paun = Math.round(allexec/execunum/2)
                //  that.texts[paun-1] = that.valuenum + '分';
                 //


              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
        //工作站
        getselect:function(val){
          // console.log(val);
        },

        //获取时间
        addDate:function(){
          const nowDate = new Date();
          const date = {
              year: nowDate.getFullYear(),
              month: nowDate.getMonth() + 1,
              date: nowDate.getDate(),
          }
          const newmonth = date.month>10?date.month:'0'+date.month
          const day = date.date>10?date.date:'0'+date.date
          this.updateTime = date.year + '.' + newmonth + '.' + day
        },

      }
    })
	}


	</script>
</body>
</html>
